<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>学生中心</title>
	<script>
		if (self == top) location.replace('/wechat/footer_wx.html?href=' +
			encodeURIComponent(location.href.substr(location.origin.length)));
	</script>
	<style scoped>
		[v-cloak] {
			display: none;
		}

		.mask_item_title {
			padding: 10px;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			font-family: 黑体;
		}

		.mask_item_content {
			width: 80%;
			margin: 0 auto;
			border: 1px solid #999;
			border-radius: 6px;
			overflow: hidden;
		}

		.mask_item_content_th {
			color: white;
			display: flex;
			font-size: 14px;
			justify-content: space-between;
			background: linear-gradient(to bottom, #4eaaf8, #117afd);
		}

		.mask_item_content_tb {
			display: flex;
			font-size: 14px;
			justify-content: space-between;
		}

		.mask_item_content_th_tr,
		.mask_item_content_tb_tr {
			width: 50%;
			text-align: center;
			padding: 10px;
			border-bottom: 1px solid #bfbfbf;
		}

		.borderRight {
			border-right: 1px solid #bfbfbf;
		}

		.mask_item_content_tb:last-child .mask_item_content_tb_tr {
			border-bottom: none;
		}

		.cancel {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			position: absolute;
			top: -14px;
			right: -6px;
			background-image: url('../image/img/quxiao2.png');
			background-size: 100% 100%;
			background-color: white;
		}
	</style>
	<link rel="stylesheet" href="css/student_home.css">
	<link rel="stylesheet" href="css/head.css">
	<link rel="stylesheet" href="../css/window.css">
</head>

<body>
	<div id="my" v-cloak>
		<div class="header">
			<img src="../image/s2.png" class="imgzc" v-if="students.length>0" @click="chooseShow=true" />
			<div class="header_title">学生中心</div>

			<!-- <img src="image/return.png" alt="" class="return" onclick="history.back()"> -->
		</div>
		<div class="div_student">
			
			<div class="div_student_item">
				<div @click="upload">
					<img :src="getImg(student.avatar)" class="tx" />
					<div style="position: fixed;top: 2px;right: 10px;" @click="unbind">解除绑定</div>
				</div>
				<div class="div_student_ritht">
					<div class="div_student_ritht_head"><span style="font-size: 18px;font-weight: 600;"
							v-text="student.name"></span></div>
					<div class="div_student_ritht_item">
						<img src="../image/img/school_icon.png" class="div_student_ritht_item_img" />
						<div v-text="student.schoolName" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item" v-if="student.phone">
						<img style="width: 12px;height: 14px;" src="../image/img/phone_icon.png"
							class="div_student_ritht_item_img" />
						<div v-text="student.phone" style="font-size: 16px"></div>
					</div>
					<div class="div_student_ritht_item" @click="getKeCheng()">
						<img style="height: 11px;" src="../image/img/class_icon.png"
							class="div_student_ritht_item_img" />
						<span class="chakanBtn">查看已报名班级/课程</span>
					</div>
				</div>
			</div>

		</div>

		<div class="main_zt">
			<div class="st-products-list">
				<div class="st-products-list_item" @click="goUrl('../public_timetable.html')">
					<img src="../image/img/myList1.png" class="main_timg">
					<span class="main_span">每周课表</span>
				</div>
				<hr class="hr_main" />
				<div class="st-products-list_item" @click="goUrl('./signin_apply_student.html?id='+student.id)">
					<img src="../image/img/myList2.png" class="main_timg">
					<span class="main_span">课销记录</span>
				</div>
				<hr class="hr_main" />
				<div class="st-products-list_item" @click="goUrl('../school_notice.html')">
					<img src="../image/img/myList3.png" class="main_timg">
					<span class="main_span">机构通知</span>
				</div>
				<hr class="hr_main" />
				<div class="st-products-list_item" @click="goUrl('../cookbook2.html#teacher')">
					<img src="../image/img/myList4.png" class="main_timg">
					<span class="main_span">食谱查看</span>
				</div>
				<hr class="hr_main" />
				<div class="st-products-list_item" @click="goUrl('./orderFood/list.html?id='+student.id)">
					<img src="../image/img/myList9.png" class="main_timg">
					<span class="main_span">订单管理</span>
				</div>
				<hr class="hr_main" />
				<div class="st-products-list_item" @click="goUrl('./orderFood/detail_date.html?id='+student.id)">
					<img src="../image/img/myList6.png" class="main_timg">
					<span class="main_span">我的订餐</span>
				</div>
			</div>
		</div>

		<!--抽屉-->
		<div class="div_drawer_1" v-if="chooseShow" @click="chooseShow=false"></div>
		<div class="div_drawer" v-if="chooseShow">
			<div class="zuoche">
				<div class="ada">
					<p>角色切换</p>
					<div v-for="(item,index) in students" :key="item.id" @click="choose(index)">
						{{item.classesName}}&nbsp; · &nbsp;{{item.name}}
					</div>
				</div>
			</div>
		
		</div>
		<div class="mask_layer" v-if="mask">
			<div class="mask_item">
				<div class="mask_item_title">已报名班级/课程</div>
				<div class="mask_item_content">
					<div class="mask_item_content_th">
						<span class="mask_item_content_th_tr borderRight">班级名称</span>
						<span class="mask_item_content_th_tr borderRight">报名课程</span>
						<span class="mask_item_content_th_tr">状态</span>
					</div>
					<div class="mask_item_content_tb" v-for="(item,i) in kechengList" :key="i">
						<span class="mask_item_content_tb_tr borderRight">{{item.className}}</span>
						<span class="mask_item_content_tb_tr borderRight">{{item.courseName}}</span>
						<span class="mask_item_content_tb_tr">{{item.studentStatus}}</span>
					</div>
				</div>
				<div class="cancel" @click="mask=false" />
			</div>
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/wechat/js/wx.js"></script>
	<script src="/js/common.js"></script>
	<script>

		function store(student) {
			sessionStorage['hxt-student'] = JSON.stringify(student);
		}
		var menus1 = [{
			text: '我的考勤',
			href: '../attendance.html',
			img: '../image/s7.png',
		}, {
			text: '我的请假',
			href: 'my_leave.html',
			img: '../image/s9.png',
			key: 'leave'
		}, {
			text: '校车',
			href: '../bus.html',
			img: '../image/s8.png',
			key: 'bus'
		}, {
			text: '补签',
			href: '../signin_apply.html',
			img: '../image/s12.png',
			key: 'punch'
		},]

		var menus2 = [{
			text: '班级通知',
			href: '../classes_notice.html',
			img: '../image/s14.png',
			key: 'classNotice'
		}, {
			text: '学校通知',
			href: '../school_notice.html',
			img: '../image/s15.png',
			key: 'notice'
		}, {
			text: '作业管理',
			href: 'my_homrwork.html',
			img: '../image/s16.png',
			key: 'homework'
		}, {
			text: '校园视频',
			href: '../monitoring.html',
			img: '../image/s17.png',
			key: 'live'
		}]

		var menus3 = [{
			text: '我的成绩',
			href: 'grade.html',
			img: '../image/s33.png',
			key: 'score'
		}, {
			text: '添加人脸',
			href: '../face.html',
			img: '../image/s24.png',
			key: 'face'
		}, {
			text: '学校食谱',
			href: '../cookbook2.html#teacher',
			img: '../image/s21.png',
			key: 'cookbook'
		}, {
			text: '本班课程',
			href: '../public_timetable.html',
			img: '../image/s22.png',
			key: 'timetable'
		}, {
			text: '打卡消课',
			href: '../school_courses.html',
			img: '../image/s34.png',
			key: 'lesson'
		}, {
			text: '商品服务',
			href: '../school_commodity.html',
			img: '../image/sp.png',
			key: 'pay'
		}, {
			text: '我的订单',
			href: '../pay_record.html',
			img: '../image/dd.png',
			key: 'pay'
		}]

		new Vue({
			el: '#my',
			data: {
				mask: false,//弹窗
				students: [],
				student: {},
				chooseShow: false,
				index: null,
				unread: {
					school: 0
				},
				menus1: menus1,
				menus2: menus2,
				menus3: menus3,
				kechengList: [],//查看已报名班级、课程
			},
			created: function () {
				axios.get('/api/bound/student').then(function (res) {
					this.students = res.data;
					// alert(this.students.length)
					if (!this.students || this.students.length == 0) {
						location.replace('/wechat/index.html');
						return;
					}
					this.choose0();
				}.bind(this));
			},
			methods: {
				goUrl: function (url) {
					window.location = url
				},
				getKeCheng: function () {
					this.mask = true
					axios.get('/s/stuOrder/student/' + this.student.id).then(function (res) {
						this.kechengList = res.data.data;
						
					}.bind(this));
				},
				hide: function (schoolId) {
					axios.get('/api/school/' + schoolId).then(function (res) {
						var hides = res.data.hides || {};
						//存储公众号的代理商id 学生端需要获取到代理商id
						localStorage.setItem('agentId', res.data.agentId);
						[this.menus1, this.menus2, this.menus3].forEach(function (it1) {
							it1.forEach(function (it) {
								Vue.set(it, 'hidden', ('key' in it) && hides[it.key]);
							});
						});
					}.bind(this));
				},
				choose0: function () {
					var student = getStudent();
					if (student) {
						this.student = student;
						this.sync(student);
						return;
					}
					this.choose(0);
					/* if (this.students.length == 1) {
						this.choose(0);
					} else {
						this.chooseShow = true;
					} */
				},
				choose: function (index) {
					this.chooseShow = false;
					if (index === this.index) return;
					this.index = index;
					this.student = this.students[index];
					this.sync(this.student);
				},
				sync: function (student) {
					this.hide(student.schoolId);
					var run = function () {
						store(student);
						this.getUnread();
					}.bind(this);

					if (this.students.length == 1) {
						run();
						return;
					}
					axios.post('/api/switch/' + student.id).then(run);
				},
				unbind: function () {
					if (!confirm('确认解绑？')) return;
					axios.post('/s/unbind').then(function (res) {
						sessionStorage.removeItem('hxt-student');
						location.replace('../index.html');
					}.bind(this));
				},
				getImg: function (pic) {
					if (!pic) return '../image/img/user.jpg';
					return '/static/' + this.student.schoolId + '/binding/' + pic;
				},
				upload: function () {
					this.setAvatar.skip = true;
					wxChooseImg(1, 'binding', this.setAvatar);
				},
				getUnread: function () {
					var cache = getUnreadCache();
					if (cache) {
						this.unread = cache;
						this.calUnreadSchool(this.unread);
						return;
					}

					// var unread = getUnread();
					// axios.post('/s/unread', unread).then(function (res) {
					// 	this.unread = res.data;
					// 	axios.post('/s/unread2', unread).then(function (res) {
					// 		var data = res.data;
					// 		this.unread = Object.assign(this.unread, data);
					// 		setUnreadCache(this.unread);
					// 		this.calUnreadSchool(this.unread);
					// 	}.bind(this));
					// }.bind(this));
				},
				calUnreadSchool: function (o) {
					Vue.set(this.unread, 'school', o.news + o.honor + o.enrollment + o.teacherMien);
				},
				setAvatar: function (avatar) {
					axios.post('/s/binding', toFormParams({ avatar: avatar })).then(function (res) {
						this.student.avatar = avatar;
						store(this.student);
					}.bind(this));
				}
			},

		})
		sessionStorage['hxt-user'] = 'student';
	</script>

</body>

</html>